<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/8/27
  Time: 11:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/> <!-- 页面整体布局样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" /> <!-- 菜单样式定义 -->
    <script src="${ctx}/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript">
        var ctx="${pageContext.request.contextPath}";
        function showUserName()
        {
            var name ="${user.username}";
            if(name != "")
            {
                $("#login").html(name);
                $("#exitP").show();
                $("#login").attr("href",ctx+"/user?flag=info&userId=${user.userId}");

            }
            else
            {
                $("#login").html("登陆");
                $("#exitP").hide();
                $("#login").attr("href",ctx+"/user?flag=login");
            }
        }

        $(document).ready(function(){
            showUserName();

            $("#receiver").change(function(){
                var name = $(this).val();
                if(name =="" || name==null ||name.length==0)
                {
                    $("#xinxi").val("收货人姓名不为空");
                    $("#xinxi").css("color","#f31106");
                }
                var szhengze = /^[\u4e00-\u9fa5]{2,4}$/;
                if(!szhengze.test(name))
                {
                    $("#xinxi").val("收货人姓名格式为2—4个汉字");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("收货人姓名格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#address").change(function(){
                var address = $(this).val();
                if(address =="" || address==null ||address.length==0)
                {
                    $("#xinxi").val("地址不能为空");
                    $("#xinxi").css("color","#f31106");
                }
                var addresszhengze = /^\w|[\u4e00-\u9fa5]{2,19}$/;
                if(!addresszhengze.test(address))
                {
                    $("#xinxi").val("地址输入错误");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("地址格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#province").change(function(){
                var sheng = $(this).val();
                if(sheng =="" || sheng==null ||sheng.length==0)
                {
                    $("#xinxi").val("省份不能为空");
                    $("#xinxi").css("color","#f31106");
                }
                var shengzhengze = /^[\u4e00-\u9fa5]{2,19}$/;
                if(!shengzhengze.test(sheng))
                {
                    $("#xinxi").val("输入错误，应输入**省");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("省份格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#zipcode").change(function(){
                var youbian = $(this).val();
                if(youbian =="" || youbian==null ||youbian.length==0)
                {
                    $("#xinxi").val("邮编不能为空");
                    $("#xinxi").css("color","#f31106");
                }
                var youbianzhengze = /^\d{6}$/;
                if(!youbianzhengze.test(youbian))
                {
                    $("#xinxi").val("输入错误，请输入6位数字的邮编");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("邮编格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#city").change(function(){
                var city = $(this).val();
                if(city =="" || city==null ||city.length==0)
                {
                    $("#xinxi").val("城市不能为空");
                    $("#xinxi").css("color","#f31106");
                }
                var cityzhengze = /^[\u4e00-\u9fa5]{2,19}$/;
                if(!cityzhengze.test(city))
                {
                    $("#xinxi").val("输入错误，请输入**市");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("城市格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#telphone").change(function(){
                var tel = $(this).val();
                if(tel =="" || tel==null ||tel.length==0)
                {
                    $("#xinxi").val("电话号不能为空,请提供真实有效电话,以便快递员送货时方便与您联系。");
                    $("#xinxi").css("color","#f31106");
                }
                var telzhengze = /^\d{11}$/;
                if(!telzhengze.test(tel))
                {
                    $("#xinxi").val("输入错误，电话号是11位的有效数字");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("电话号格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#county").change(function(){
                var qu = $(this).val();
                if(qu =="" || qu==null ||qu.length==0)
                {
                    $("#xinxi").val("区县不能为空");
                    $("#xinxi").css("color","#f31106");
                }
                var quzhengze = /^[\u4e00-\u9fa5]{2,19}$/;
                if(!quzhengze.test(qu))
                {
                    $("#xinxi").val("输入格式错误");
                    $("#xinxi").css("color","#f31106");
                }
                else
                {
                    $("#xinxi").val("区县格式正确");
                    $("#xinxi").css("color","green");
                }
            });
            $("#zfb").click(function(){
                console.log("进入支付宝点击");
                  var pd = $("#xieyi").attr("checked");
                  if(pd==true)
                  {
                      $("#payment").val("2");
                      $("#saform").submit();

                  }
                  else
                  {
                      alert("请接受本网站的使用条例");

                  }
            });

            $("#wx").click(function(){
                console.log("进入微信点击");
                 var pd = $("#xieyi").attr("checked");
                 if(pd==true)
                 {
                     $("#payment").val("1");
                     $("#saform").submit();

                 }
                 else
                 {
                     alert("请接受本网站的条例");

                 }
            });
        });
    </script>
</head>

<body>
<div id="templatemo_body_wrapper">
    <div id="templatemo_wrapper">


        <!-- header -->
        <div id="templatemo_header">
            <div id="site_title"><h1><a href="#">穿美在线鞋城</a></h1></div>
            <div id="header_right">
                <a href="#" id="login">登录</a>&nbsp;
                <span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
            </div>
            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_header -->


        <!-- menu -->
        <div id="templatemo_menubar">
            <div id="top_nav" class="ddsmoothmenu">
                <ul>
                    <li><a href="${ctx}/home?flag=home" class="selected">首页</a></li>
                    <li><a href="${ctx}/product?flag=product">产品</a></li>
                    <li><a href="${ctx}/shopcar?tz=gocar" class="selected">我的购物车</a></li>
                    <li><a href="${ctx}/order?flag=fol">我的订单</a></li>
                </ul>
                <br style="clear: left" />
            </div> <!-- end of ddsmoothmenu -->
        </div><!-- END of templatemo_menubar -->


        <!-- main -->
        <div id="templatemo_main">
            <!-- 侧边栏 -->
            <div id="sidebar" class="float_l">
                <!-- sidebar 1 -->
                <div class="sidebar_box"><span class="bottom"></span>
                    <h3>品牌</h3>
                    <div class="content">
                        <ul class="sidebar_list">
                            <c:forEach items="${list}" var="x">
                                <li><a href="${ctx}/home?flag=pp&pinpai=${x.name}">${x.name}</a></li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <!-- sidebar 2 -->
                <div class="sidebar_box"><span class="bottom"></span>
                    <h3>热卖单品 </h3>
                    <div class="content">
                        <c:forEach items="${list2}" var="x">
                            <div class="bs_box">

                                <a href="${ctx}/home?flag=xq&productId=${x.productId}"><img src='${ctx}${x.imgpath}' alt="image" style="width:62px;height:72px"/></a>
                                <p>${x.feature}</p>
                                <p class="price">${x.price}</p>

                                <div class="cleaner"></div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div><!-- END of sidebar -->

            <!-- 内容展示区 -->
            <div id="content" class="float_r">
                <form action="${ctx}/shopcar?tz=tijiaojiesuan" method="post" id="saform">
                    <input type="hidden" id="flag" name="flag" value="sa" />
                    <input type="hidden" id="payment" name="payment" value="" />
                    <input type="hidden" id="amount" name="amount" value="800" />
                    <!-- 结算  -->
                    <h3>结算</h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${message}
                    <p style="font-size: 14px;">收货人信息&nbsp;&nbsp;&nbsp;&nbsp;<input id="xinxi" type="text" disabled="true" style="background:none;border: 0"/></p>
                    <div class="shopcart_box_detail_l">
                        <p class="product_price">收货人姓名:<input type="text" id="receiver" name="receiver"></p>
                        <p class="product_price">省份:<input type="text" id="province" name="province"></p>
                        <p class="product_price">城市:<input type="text" id="city" name="city"></p>
                        <p class="product_price">区、县:<input type="text" id="county" name="county"></p>
                    </div>
                    <div class="shopcart_box_detail_r">
                        <p class="product_price">地址:<input type="text" id="address" name="address"></p>
                        <p class="product_price">邮编:<input type="text" id="zipcode" name="zipcode"></p>
                        <p class="product_price">电话:<input type="text" id="telphone" name="telphone"></p>
                    </div>
                </form>
            </div>

            <div id="content_1" class="float_r shopcart_pay">
                <!-- 购物车内容 -->
                <p style="font-size: 14px;">购物车</p>
                <div class="shopcart_pay_l">
                    <p class="product_price">金额：${countmoney}</p>
                </div>

                <div class="shopcart_pay_xy">
                    <input type="checkbox" id="xieyi" name="xieyi">我接受本网站的使用条款 <br/>
                </div>

                <div class="shopcart_pay_type">
                    <div class="shopcart_pay_type_img"><img alt="" src="${ctx}/images/alipay.jpg"></div>
                    <div  class="shopcart_pay_type_desc">推荐使用支付宝付款，使用红包支付，更多实惠！</div>
                    <div class="shopcart_pay_type_zf"><a href="javascript:void(0)" id="zfb" >支付宝支付</a></div>
                </div>

                <div class="shopcart_pay_type">
                    <div class="shopcart_pay_type_img"><img alt="" src="${ctx}/images/wechat.jpg"></div>
                    <div  class="shopcart_pay_type_desc">没有支付宝帐户，不用担心，我们也支持微信支付！</div>
                    <div class="shopcart_pay_type_zf"><a href="javascript:void(0)" id="wx">微信支付</a></div>
                </div>

                <div class="shopcart_pay_back">
                    <p style="font-size: 14px;"><a href="${ctx}/shopcar?tz=gocar">暂不结算,返回购物车</a></p>
                </div>
            </div>

            <div class="cleaner"></div>
        </div><!-- END of templatemo_main -->


        <!-- footer -->
        <div id="templatemo_footer">
            <p>
                <a href="${ctx}/home?flag=home" class="selected">首页</a> | <a href="${ctx}/product?flag=product">产品</a> | <a href="${ctx}/shopcar?tz=gocar">我的购物车</a> | <a href="${ctx}/order?flag=fol">我的订单</a>
            </p>
            版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
        </div><!-- END of templatemo_footer -->


    </div><!-- END of templatemo_wrapper -->
</div><!-- END of templatemo_body_wrapper -->

</body>
</html>
